<template>
	<view>
		<view class="my-add-tips">
			温馨提示：为了您和其他业主的安全，请如实填写相关信息
		</view>
		<view class="my-add-form">
			<view class="my-add-title">
				当前房屋({{room.CoName+room.CSName}})
			</view>
			<up-cell-group :custom-style="customeStyles">
				<up-cell title="姓名">
					<template #value>
						<up-input v-model="Name" placeholder="填写姓名" input-align="right" border="none"></up-input>
					</template>
				</up-cell>
				<up-cell title="手机号">
					<template #value>
						<up-input v-model="Mobile" placeholder="填写手机号" input-align="right" border="none"></up-input>
					</template>
				</up-cell>
				<up-cell title="成员关系">
					<template #value>
						<view class="">
							<picker mode="selector" :range="relations" @change="onRelationChange">
								<view style="display: flex; align-items: center;">
									{{relations[relationIndex]}}
									<up-icon name="arrow-right" :size="22"></up-icon>
								</view>
							</picker>
						</view>
					</template>
				</up-cell>
				<up-cell title="证件类型">
					<template #value>
						<view class="">
							<picker mode="selector" :range="idTypes" range-key="title" @change="onIdTypeChange">
								<view style="display: flex;align-items: center;">
									{{idTypes[idIndex].title}}
									<up-icon name="arrow-right" :size="22"></up-icon>
								</view>
							</picker>
						</view>
					</template>
				</up-cell>
				<up-cell title="证件号码">
					<template #value>
						<up-input v-model="IdentityNo" placeholder="填写证件号码" input-align="right"
							border="none"></up-input>
					</template>
				</up-cell>
			</up-cell-group>

			<up-cell-group :custom-style="customeStyles">
				<up-cell title="是否为无手机号码的未成年人或者老人">
					<template #value>
						<checkbox-group @change="checkboxChange">
							<label>
								<checkbox value="1" />
							</label>
						</checkbox-group>
					</template>
				</up-cell>
			</up-cell-group>
		</view>
		<view class="" style="margin-top: 80rpx; padding: 0 80rpx;">
			<up-button type="error" shape="circle" text="完成" @click="handleSubmit"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import mineApi from '../../../api/mine';
	const customeStyles = {
		backgroundColor: "#fff",
		marginTop: "40rpx"
	}
	const room = ref({});
	const Relation = ref(2);
	const relations = ref(["租客"])
	const relationIndex = ref(0);
	const idTypes = reactive([{
			title: "身份证",
			value: 10,
		},
		{
			title: "普通护照",
			value: 14,
		},
		{
			title: "出入境通行证",
			value: 20,
		},
		{
			title: "暂住证",
			value: 38,
		},
		{
			title: "永居证",
			value: 50,
		},
		{
			title: "港澳台居住证",
			value: 60,
		},
		{
			title: "其他",
			value: 99,
		},
	])
	const idIndex = ref(0);
	onLoad((options) => {
		let type = options.type;
		if (type === "添加家人") {
			relations.value = ["家人"];
			Relation.value = 1;
		}
		room.value = JSON.parse(options.room);
		uni.setNavigationBarTitle({
			title: type
		});
	});
	const Name = ref("")
	const Mobile = ref("")
	const IdentityNo = ref("")
	const check = ref(false)
	const onRelationChange = (e) => {
		relationIndex.value = e.detail.value
	}
	const onIdTypeChange = (e) => {
		idIndex.value = e.detail.value
	}
	const checkboxChange = (e) => {
		check.value = e.detail.value.length > 0
	}

	const handleSubmit = async () => {

		const reqObj = {
			RId: room.value.RId,
			Name: Name.value,
			Mobile: Mobile.value,
			IdentityType: idTypes[idIndex.value].value,
			IdentityNo: IdentityNo.value,
			Relation: Relation.value,
			IsChild: check.value
		}

		const res = await mineApi.createHouse(reqObj);
		console.log(res);
		if (!res.State) {
			uni.showToast({
				icon: 'none',
				title: "请完善信息后再提交"
			})
		} else {
			uni.showToast({
				icon: 'success',
				title: "添加成功"
			});
			uni.navigateBack()
		}
	}
</script>

<style lang="scss" scoped>
	.my-add-tips {
		background-color: #c6ae9e;
		font-size: 26rpx;
		padding: 10rpx;
	}

	.my-add-title {
		font-size: 24rpx;
		text-align: center;
		margin-top: 40rpx;
	}
</style>